<template>
  <div class="">
    <el-card v-if="contentView">
      <el-row>
        <el-col :span="4">
          <Searchmodule :placeholder="placeholder" @seacherKey="seacher"></Searchmodule>
        </el-col>
        <el-col :span="2" style="text-align: right;">
          <div>
            <el-button    type="primary" icon="el-icon-download" @click="downloadProjectInfoTemplate()">下载导入模板</el-button>
          </div>
        </el-col>
        <el-col :span="2" style="text-align: right;">
          <div>
            <el-upload   style="margin: 0 10px;" :action="importUrl+'dict/importProjectTpl'"
                         :on-success="uploadSuccessHandler"
                         :on-error="uploadFailHandler"
                         :before-upload="beforeUpload"
                         :file-list="fileList"

                         multiple
                         name="excel" :show-file-list="false" :headers="headers">
                <el-button  type="primary" icon="el-icon-plus">点击上传</el-button>
            </el-upload>
          </div>
        </el-col>

        <el-col :span="12" style="text-align: right;">
          <div>
            <el-button    type="primary" icon="el-icon-plus" @click="operationView(0)">添加</el-button>
          </div>
        </el-col>

      </el-row>
      <!--表格-->
      <el-table :row-style="{height: '10px'}" :cell-style="{padding:'0px'}" :data="tableData" border v-loading="loading">
        <!--  <el-table-column type="index" label="序号" v-if="false" align="center" width="50">
          </el-table-column> -->
        <el-table-column prop="valueOne" label="项目名称" align="center" >
        </el-table-column>
        <el-table-column prop="valueTwo" label="单位工程名称" align="center" >
        </el-table-column>
        <el-table-column  label="操作"   align="center" >
          <template  slot-scope="scope">
            <div  class="optBtn-box">
              <el-button type="text" icon="el-icon-edit" @click="operationView(1, scope.row)">编辑</el-button>
              <el-button type="text" :loading="scope.row.loading" icon="el-icon-delete" @click="operationView(2, scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align: center;" :disabled="loading" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="queryInfo.pageNo" :page-sizes="[25,50]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>
    <submitForm v-else :subData="subData" @closeView="closeView" @refresh="refreshTable"></submitForm>


  </div>
</template>


<script>
  import { pageDict, insertDict,updateDict,deleteDict,exportProjectInfoTpl } from '@/api/materialScience/materailDict.js'
  import { mapState } from "vuex"
  import submitForm from './addProject/addProject.vue'
  let $this = null
  export default {
    name: 'purchase',
    components: {
      submitForm
    },
    computed: {
      ...mapState(["authList"]),
    },
    data () {
      return {
        contentView: true,
        placeholder: '类别名称',
        loading: false,
        queryInfo: {
          pageNo: 1,
          pageSize: 25,
          valueOne: '',
          type:3
        },
        tableData: [],
        total: 0,
        subData: {
          btnId: '',
          id: ''
        },
        fileList:[],
        importVisible:false,
        importUrl:this.importUrl,
        headers: {
          apiKey: window.sessionStorage.getItem('token')
        },
      }
    },
    created () {
      $this = this
      $this.getPageSupplier()
    },
    methods: {

      beforeUpload(file) {
        this.$loading({
          lock: true,
          text: '正在上传...',
          spinner: 'el-icon-loading',
        })
      },
      // 导入成功触发
      uploadSuccessHandler (response, file, fileList) {
        this.$loading().close()
        if (response.success) {
          $this.$message({
            type: 'success',
            message: '导入成功',
            showClose: true
          })
          $this.getPageSupplier()
          $this.importVisible=false
        } else {
          $this.$message({
            type: 'error',
            message: response.message,
            showClose: true
          })
          $this.fileList=[]
        }
      },
      uploadFailHandler () {
        this.$loading().close()
        $this.$message.error('上传失败')
      },
      downloadProjectInfoTemplate () {
        $this.isDown = true
        exportProjectInfoTpl().then(res => {
          $this.isDown = false
          $this.downloadFile(res,  '项目信息导入模板')
        }).catch(err => {
          $this.isDown = false
          return $this.$message.error('导出文件错误')
        })
      },
      downloadFile (res, name) {
        const blob = new Blob([res.data])
        const fileName = name + '.xlsx'
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href)
        document.body.removeChild(elink)
      },
      authFilter (code) {
        let flag = false
        if(this.authList.length) {
          this.authList.forEach(item => {
            if(item.resourceCode == code) {
              flag = true
            }
          })
        }
        return flag
      },
      getPageSupplier () {
        $this.loading = true
        pageDict($this.queryInfo).then(res => {
          $this.loading = false
          $this.tableData = res.data.data.records
          $this.total = res.data.data.total
        }).catch(err => {
          $this.loading = false
          return $this.$message.error(err.message)
        })
      },
      handleCurrentChange (val) {
        $this.queryInfo.pageNo = val
        $this.getPageSupplier()
      },
      handleSizeChange (size) {
        $this.queryInfo.pageSize = size
        $this.getPageSupplier()
      },
      seacher (key) {
        $this.queryInfo.valueOne = key
        $this.queryInfo.type = 3
        $this.getPageSupplier()
      },
      operationView (btnId, row) {
        if (btnId === 0) {
          $this.subData.btnId = btnId
          $this.contentView = false
        } else if (btnId === 1) {
          $this.subData.btnId = btnId
          $this.subData.id = row.id
          $this.contentView = false
        } else if (btnId === 2) {
          $this.$set(row, 'loading', true)
          $this.deleteDict(row)
        } else {
          return $this.$message.error('操作错误')
        }
      },
      // 删除
      deleteDict (row) {
        deleteDict(row.id).then(res => {
          $this.$set(row, 'loading', false)
          $this.getPageSupplier()
          return $this.$message.success('删除成功')
        }).catch(err => {
          $this.$set(row, 'loading', false)
          return $this.$message.error('操作错误')
        })
      },
      // 返回table
      closeView () {
        $this.contentView = true
      },
      refreshTable () {
        $this.getPageSupplier()
        $this.contentView = true
      }
    }
  }
</script>
<style scoped>

</style>
